<template>
  <el-popover placement="bottom" trigger="hover">
    <div>
      <div class="msg-link" v-for="item in notices" :key="item.id">
        <el-badge :value="item.count" :hidden="item.count <= 0">
          <a @click="goto(item)"
            ><i :class="item.icon"></i
            ><span class="msg-link-text">{{ item.title }}</span>
          </a>
        </el-badge>
        <el-divider class="divider"></el-divider>
      </div>
    </div>
    <i slot="reference" class="el-icon-bell">
      <el-badge :value="totalCount" :hidden="totalCount <= 0" class="badge"
        ><span class="bell-text">消息</span></el-badge
      ></i
    >
  </el-popover>
</template>

<script>
export default {
  name: "MessageBox",
  data() {
    return {
      notices: [
        {
          id: 1,
          title: "未读公告",
          icon: "el-icon-message",
          count: 0,
          url: "/default/announcement_management",
        },
        {
          id: 2,
          title: "待办认证",
          icon: "el-icon-s-flag",
          count: 0,
          url: "/default/customer_management",
        },
        {
          id: 3,
          title: "待办维修",
          icon: "el-icon-tickets",
          count: 0,
          url: "/default/property_maintenance_management",
        },
        {
          id: 4,
          title: "待办预约",
          icon: "el-icon-date",
          count: 2,
          url: "/default/user_reserve_management",
        },
        {
          id: 5,
          title: "待批合同",
          icon: "el-icon-edit-outline",
          count: 0,
          url: "/default/contract_review",
        },
      ],
    };
  },
  computed: {
    totalCount() {
      let value = 0;
      for (let item of this.notices) {
        value += item.count;
      }
      return value;
    },
  },
  methods: {
    goto(pItem) {
      pItem.count = 0;
      this.$router.push({ path: pItem.url });
    },
  },
};
</script>

<style scoped>
.bell-text {
  padding: 0 0 0 5px;
  line-height: 22px;
}
.msg-link {
  padding: 8px 0;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}
.msg-link-text {
  margin: 0 0 0 5px;
}
.divider {
  margin: 2px 0;
}
.badge {
  vertical-align: unset;
}
</style>